<template>
  <div>
    <el-input @click.native="drawer = true" v-model="model" readonly>
      <template slot="append">
        <!-- <svg-icon iconClass="dot32"></svg-icon> -->
        <!-- <a class="ne-dolt">. . .</a> -->
        <a href="javascript:;" style="font-size:20px;">
          <i class="el-icon-more"></i>
        </a>
      </template>
    </el-input>
    <el-drawer ref="drawer" :title="title" :visible.sync="drawer" :size="size">
      <el-container>
        <el-main>
          <el-row>
            <el-col>
              <slot></slot>
            </el-col>
          </el-row>
        </el-main>

        <el-footer :v-show="hasfoot">
          <el-row>
            <el-col class="demo-drawer__footer">
              <el-button @click="cancelForm">取 消</el-button>
              <el-button
                type="primary"
                @click="$refs.drawer.closeDrawer()"
                :loading="loading"
              >
                {{ loading ? "提交中 ..." : "确 定" }}
              </el-button>
            </el-col>
          </el-row>
        </el-footer>
      </el-container>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "InputDrawer",
  props: {
    model: [Number, String],
    title: [String],
    size: [String],
    hasfoot: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      drawer: false,
      direction: "rtl",
      loading: false,
    };
  },
  methods: {
    close() {
      this.$refs.drawer.closeDrawer();
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm("确定要提交表单吗？")
        .then(() => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);
        })
        .catch(() => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-footer {
  position: absolute;
  display: block;
  bottom: 5px;
  width: 100%;
}
.demo-drawer__footer {
  text-align: center;
  position: absolute;
  bottom: 0;
}
.demo-drawer__footer button {
  display: inline-block;
  width: 45%;
}
</style>
